<template>
	<view class="content">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<view class="search-bg flex-row">
			<view class="search-content flex-row-start flex1">
				<!-- <view class="iconfont icon-user icon"></view> -->
				<icon type="search" size="20" class="icon"/>
				<input @confirm="searchMenu" v-model="searchValue" class="input flex1" type="text" placeholder="输入功能" maxlength="30" />
			</view>
			<image @click="handleLogout" class="logout-icon" src="/static/images/logout.png"></image>
		</view>
		<view class="flex-row-center-start">
			<scroll-view style="width: 182rpx" class="flex1" scroll-y>
				<view v-for="(item, index) in menuList" :key="index" @click="setMenu(item)" class="menu-1" :class="{'menu-1-active':menuPath == item.path}">{{item.meta.title}}</view>
			</scroll-view>
			<scroll-view class="menu-wrap flex1" scroll-y>
				<view class="">
					<image class="index-bg" src="/static/images/index_adv.png"></image>
				</view>
				<view class="menu-list flex-row-start-start">
					<view v-for="(item,index) in menu" :key="index" class="menu" @click="toPage(item.component+'?'+item.query)">
						<view class="menu-icon-wrap flex-row">
							<image class="menu-icon" :src="calcImg(item, index)"></image>
						</view>
						{{item.meta.title}}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import constant from '@/utils/constant'
  import store from "@/store"
	
	export default {
		data() {
			return {
				searchValue: '',
				menuList:this.$store.state.user.routers,
				menuPath:'',
				menu:[]
			}
		},
		onLoad: function() {
			this.setMenu(this.$store.state.user.routers[0])
		},
		methods: {
			searchMenu(){
				this.menuList.forEach((item,index)=>{
					item.children.forEach((subItem,subIndex)=>{
						if(subItem.meta.title == this.searchValue){
							this.toPage(subItem.component+'?'+subItem.query)
						}
					})
				})
				this.$modal.msg("请输入准确的菜单名称")
			},
			calcImg(item, index){
				return '/static/images/menu/menu_'+ item.component.split('/')[0] +'_'+(index+1)+'.png'
			},
			toPage(page) {
				this.$tab.navigateTo(page);
			},
			setMenu(menu){
				this.menuPath = menu.path;
				this.menu = menu.children;
			},
			// 退出登录
			handleLogout() {
			  this.$modal.confirm('确定注销并退出系统吗？').then(() => {
			    this.$store.dispatch('LogOut').then(() => {
			      this.$tab.reLaunch('/pages/index')
			    })
			  })
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #fff;
	}
	.search-bg{
		background-color: #fff;
		width:100vw;
		height: 92rpx;
		box-shadow: 0rpx 1rpx 8rpx rgba(13, 17, 22, 0.12);
		margin-bottom: 8rpx;
		.search-content{
			margin: 17rpx 0 17rpx 25rpx;
			background-color: #F2F6F8;
			// width:1008rpx;
			height: 58rpx;
			border-radius: 4rpx;
			.icon{
				font-size: 40rpx;
				padding: 9rpx 15rpx 9rpx 25rpx;
			}
		}
		.logout-icon{
			width: 40rpx;
			height: 40rpx;
			margin: 17rpx 25rpx;
		}
	}
	
	.menu-1{
		width: 182rpx;
		height:92rpx;
		font-size: 31rpx;
		color:#8997A8;
		font-size: 29rpx;
		text-align: center;
		line-height: 92rpx;
	}
	.menu-1-active{
		width: 182rpx;
		height:92rpx;
		background-color: #FFFFFF;
		border-radius: 17rpx 0rpx 0rpx 17rpx;
		font-size: 31rpx;
		color:#0D1116;
		font-size: 29rpx;
		text-align: center;
		line-height: 92rpx;
		position: relative;
	}
	.menu-1-active::after{
		content:"";
		width: 5rpx;
		height: 42rpx;
		background-color: #4599AD;
		position: absolute;
		left:0;
		top:25rpx;
	}
	.menu-wrap{
		width: 568rpx;
		height: calc(100vh - 100rpx - var(--status-bar-height));
		background: #FFFFFF;
		border-radius: 17rpx 0rpx 0rpx 0rpx;

		.index-bg {
			width: 518rpx;
			height: 149rpx;
			margin: 25rpx;
			border-radius: 8rpx;
		}
		.menu-list{
			flex-wrap: wrap;
			margin-left: 8rpx;
			.menu{
				font-size: 25rpx;
				color:#304156;
				margin-left: 17rpx;
				margin-bottom: 25rpx;
				text-align: center;
				width: 117rpx;
				.menu-icon-wrap{
					width: 117rpx;
					height: 117rpx;
					background: #F8F8F8;
					border-radius: 8rpx;
				}
				.menu-icon{
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
	}
</style>
